<template>
  <div class="ext-splitpanes-theme" style="height: 100%">
    <Splitpanes :first-splitter="false">
      <Pane :size="30" v-if="!hidedDirection">
        <DirectionArea ref="directionArea"></DirectionArea>
      </Pane>
      <Pane>
        <Splitpanes horizontal :first-splitter="false">
          <Pane :size="65"><SqlEditor ref="sqlEditor"></SqlEditor></Pane>
          <Pane :size="35"><ResultArea ref="resultArea"></ResultArea></Pane>
        </Splitpanes>
      </Pane>
    </Splitpanes>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';
import '@/styles/ext-splitpanes-theme.css';
import 'splitpanes/dist/splitpanes.css';
import SqlEditor from '@/components/SqlEditor.vue';
import ResultArea from '@/components/ResultArea.vue';
import DirectionArea from '@/components/DirectionArea.vue';

export default {
  components: {
    Pane,
    Splitpanes,
    SqlEditor,
    ResultArea,
    DirectionArea,
  },
  data() {
    return {
      hidedDirection: true,
      table: null,
    };
  },
  methods: {
    showDirection(markdown) {
      this.hidedDirection = false;
      this.$nextTick(() => {
        this.$refs.directionArea.text = markdown;
      });
    },
    readOnlySQLEditor(arg) {
      this.$refs.sqlEditor.readOnly = arg;
    },
    getSQL() {
      return this.$refs.sqlEditor.selectedText || this.$refs.sqlEditor.text;
    },
    setSQL(sql) {
      this.$refs.sqlEditor.text = sql;
    },
    setResult(text) {
      this.$refs.resultArea.text = text;
    },
    appendResult(text) {
      this.$refs.resultArea.text += `\n${text}`;
    },
    showTable(table) {
      this.$refs.resultArea.table = table;
      this.$refs.resultArea.hidedTable = false;
    },
    closeTable() {
      this.$refs.resultArea.hidedTable = true;
    },
  },
};
</script>

<style></style>
